<template>
  <div class="dashboard-container">
    <el-row style="line-height: 30px">
      <el-row :span="24" style="margin-top: 10px">欢迎使用 在线考试系统</el-row>
      <el-row :span="24" style="font-size: 14px; color: #666">系统版本：1.0.0</el-row>
    </el-row>

    <el-carousel :interval="3000" type="card" height="300px" style="margin-bottom: 80px">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" alt="轮播图" class="carousel-image" />
        <div class="carousel-caption">{{ item.caption }}</div>
      </el-carousel-item>
    </el-carousel>

    <el-row class="quick-access-section" :gutter="20">
      <el-col :span="6">
        <el-card class="quick-access-card" shadow="hover" >
          <div class="card-icon">
            <i class="el-icon-s-claim" style="font-size: 70px; color: #064425"></i>
          </div>
          <el-button class="button" @click="navigateTo('Repo')">题库管理</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="quick-access-card" shadow="hover" >
          <div class="card-icon">
            <i class="el-icon-data-analysis" style="font-size: 70px; color: #064425"></i>
          </div>
          <el-button class="button" @click="navigateTo('Question')">题目管理</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="quick-access-card" shadow="hover" >
          <div class="card-icon">
            <i class="el-icon-tickets" style="font-size: 70px; color: #064425"></i>
          </div>
          <el-button class="button" @click="navigateTo('Paper')">试卷管理</el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="quick-access-card" shadow="hover" >
          <div class="card-icon">
            <i class="el-icon-user" style="font-size: 70px; color: #064425"></i>
          </div>
          <el-button class="button" @click="navigateTo('Exam')">考试管理</el-button>
        </el-card>
      </el-col>
      </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      carouselItems: [
        {
          image: require('@/assets/images/carousel1.png'), // 使用 require 加载图片
          caption: '低空经济成为热点市场', // 描述文字
          link: '/home' // 点击后跳转到首页
        },
        {
          image: require('@/assets/images/carousel2.jpg'),
          caption: '机器人正在取代大部分体力工作',
          link: '/repo' // 点击后跳转到题库管理页面
        },
        {
          image: require('@/assets/images/carousel3.jpg'),
          caption: '计算机行业成为未来风口',
          link: '/Exam' // 点击后跳转到考试页面
        }
      ]
    }
  },
  methods: {
    // 跳转到指定页面
    navigateTo(routeName) {
      this.$router.push({ name: routeName })
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style scoped>
/* 轮播图样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片覆盖整个轮播项 */
}

.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}

.card-icon{
  text-align: center;
}

.button{
  display: block; /* 按钮设置为块级元素 */
  margin: 30px auto 0px auto; /* 水平居中 */
}
.quick-access-card{
  background-color: #dbe9de;
}
.dashboard-container{
  margin: 0px;
  font-size: 24px;
  height: 100vh; /* 设置高度为视口高度 */
  background-image: url('~@/assets/images/green.jpg');
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}
</style>
